<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02模板语法</title>
</head>
<body>
<!--
    1.模板的理解：动态的html页面，
                包含了一些JS语法代码
                双大括号表达式
                指令(以v-开头的自定义标签)
    2.双大括号表达式
      语法：{{exp}} 或 {{{exp}}}
      功能：向页面输出数据
      可以调用对象的方法
    3.指令一：强制数据绑定
      功能：指定变化的属性值
      完整写法：
          v-bind:xxx='yyy'    //yyy会作为表达式解析执行
      简介写法：
          :xxx = 'yyy'
    4.指令二：绑定事件监听
      功能：绑定指定事件名的回调函数
      完整写法：
        v-on:click='xxx'
      简洁写法：
        @click='xxx'
-->
    <div id="app">
      <h2>1.双大括号表达式</h2>
      <p>{{msg}}</p>                      <!-- textContent -->
      <p>{{msg.toUpperCase()}}}</p>       <!-- textContent -->
      <p v-text="msg"></p>                <!-- textContent -->
      <p v-html="msg"></p>                <!-- innerHTML -->
      <p></p>

      <h2>2.指令一：强制数据绑定</h2>
      <img src="imgUrl" />
      <img v-bind:src="imgUrl" />
      <img :src="imgUrl" />

      <h2>3.指令二：绑定事件监听</h2>
      <button v-on:click="test">test1</button>
      <button @click="test">test1</button>
      <button @click="test2('22')">test1</button>
      <button @click="test2(msg)">test1</button>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el:'#app',
        data:{
          msg : '<a href="https://www.baidu.com/">I WILL Back !</a>',
          imgUrl :"https://www.baidu.com/img/bd_logo1.png"
        },
        methods:{
          test(){
            alert("heihei");
          },
          test2(content){
            alert(content);
          }
        }
      });
    </script>
</body>
</html>
